<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户管理</title>
<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" />
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript">
function tipOpen(content) {
	$(".tipright p").text(content);
	$("#tip").fadeIn(200);
}
function tipClose() {
	$("#tip").fadeOut(200);
}
</script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>客户浏览</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form id="customForm" th:action="@{/custom/queryByParamAndUid}" method="post">
    <input type="hidden" name="htmlNum" value="2"/>
    <ul class="tools">
      <li> 公司名称:
        <input type="text" name="company" size="12" th:value="${custom==null?'':custom.company}" />
      </li>
      <li> 客户姓名:
        <input type="text" name="customname" size="12" th:value="${custom==null?'':custom.customname}" />
      </li>
      <li> 所属区域：
        <select name="provinceId" id="provinceId" >
          <option value="">请选择省份</option>
          <option th:each="province:${session.provinceList}" th:text="${province.pName}"  th:value="${province.id}" th:selected="${provinceId==province.id}">北京</option>
        </select>
        <!--回显城市id，存储隐藏域中-->
        <input type="hidden" id="hideCityId" th:value="${custom==null?'':custom.address}"/>
        <select name="address" id="cityId">
          <option value="">请选择城市</option>
          <option th:if="${cityByProvinceId != null}" th:each="city:${cityByProvinceId}" th:text="${city.cName}" th:selected="${city.id==custom.address}" th:value="${city.id}"></option>
        </select>
      </li>
      <li class="subBut" onclick="chaxun(1)"><img th:src="@{/images/t06.png}" />查询</li>
    </ul>
    <table class="tablelist">
      <thead>
        <tr>
          <th>序号</th>
          <th>客户姓名</th>
          <th>性别</th>
          <th>联系电话</th>
          <th>所属公司</th>
          <th>所属区域</th>
          <th>分配时间</th>
          <th>客服人员</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody th:if="${session.customPage != null}">
        <tr th:each="custom:${session.customPage.data}">
          <td th:text="${customStat.count + (session.customPage.pageNum - 1)*session.customPage.pageSize }"></td>
          <td th:text="${custom.customname}"></td>
          <td th:text="${custom.sex}"></td>
          <td th:text="${custom.telephone}"></td>
          <td th:text="${custom.company}"></td>
          <td th:text="${custom.address == null ? '' : custom.city.province.PName+custom.city.cName}"></td>
          <td th:text="${custom.status eq '不可用' ? '': #dates.format(custom.distractime,'yyyy-MM-dd HH:mm:ss')}"></td>
          <td th:text="${custom.serviceUsers == null  ? '' : custom.serviceUsers.getUname()}"></td>
          <!--          <td th:text="${custom.status eq '不可用' ? '' : custom.serviceid}"></td>-->
          <td>
            <a th:href="@{'/custom/toShow?customId='+${custom.customid}}" class="tablelink">查看详情</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pagin">
      <input type="hidden" name="pageSize" th:value="${session.customPage.pageSize}" />
      <input type="hidden" name="pageNum" id="pageNum"  th:value="${session.customPage.pageNum}" />
      <div class="message">共<i class="blue" th:text="${session.customPage.totalRows}">1256</i>条记录，当前显示第&nbsp;<i class="blue" th:text="${session.customPage.pageNum}" >2&nbsp;</i>页</div>
      <!--总页数大于7页的时候-->
      <ul class="paginList" th:if="${session.customPage.totalPage>7}">
        <li class="paginItem"><a href="javascript:;" th:onclick="lunbo([[${session.customPage.pageNum==1?1:session.customPage.pageNum-1}]])"><span class="pagepre"></span></a></li>
        <!--第一个格子-->
        <li th:class="${session.customPage.pageNum==1?'paginItem current':'paginItem'}">
          <a href="javascript:;"  onclick="lunbo(1)">1</a>
        </li>

        <!--第二个格子-->
        <li class="paginItem" th:if="${(session.customPage.pageNum>session.customPage.totalPage-5) && (session.customPage.pageNum>5)}"><a href="javascript:;">...</a></li>
        <li th:class="${session.customPage.pageNum==2?'paginItem current':'paginItem'}" th:if="${(session.customPage.pageNum<=5) || (session.customPage.pageNum<=session.customPage.totalPage-5 && session.customPage.pageNum>5)}">
          <a href="javascript:;" onclick="lunbo(2)">2</a>
        </li>

        <!--第三个格子-->
        <li class="paginItem" th:if="${5<session.customPage.pageNum && session.customPage.pageNum<=(session.customPage.totalPage-5)}"><a href="javascript:;" >...</a></li>
        <li th:class="${session.customPage.pageNum==3?'paginItem current':'paginItem'}" th:if="${session.customPage.pageNum<=5}"><a href="javascript:;" onclick="lunbo(3)">3</a></li>
        <li th:class="${session.customPage.pageNum==(session.customPage.totalPage-4)?'paginItem current':'paginItem'}" th:if="${(session.customPage.pageNum>session.customPage.totalPage-5) && (session.customPage.pageNum>5)}"><a href="javascript:;" th:onclick="lunbo([[${session.customPage.totalPage-4}]])" th:text="${session.customPage.totalPage-4}" >6</a></li>

        <!--第四个格子-->
        <li th:class="${session.customPage.pageNum==4?'paginItem current':'paginItem'}" th:if="${session.customPage.pageNum<=5}"><a href="javascript:;" onclick="lunbo(4)">4</a></li>
        <li class="paginItem current" th:if="${5<session.customPage.pageNum && session.customPage.pageNum<=(session.customPage.totalPage-5)}" ><a href="javascript:;" th:text="${session.customPage.pageNum}"></a></li>
        <li th:class="${session.customPage.pageNum==(session.customPage.totalPage-3)?'paginItem current':'paginItem'}" th:if="${(session.customPage.pageNum>session.customPage.totalPage-5) && (session.customPage.pageNum>5)}" ><a href="javascript:;" th:onclick="lunbo([[${session.customPage.totalPage-3}]])" th:text="${session.customPage.totalPage-3}">7</a></li>
        <!--第五个格子-->
        <li th:class="${session.customPage.pageNum==5?'paginItem current':'paginItem'}" th:if="${session.customPage.pageNum<=5}" ><a href="javascript:;" onclick="lunbo(5)">5</a></li>
        <li class="paginItem" th:if="${5<session.customPage.pageNum && session.customPage.pageNum<=(session.customPage.totalPage-5)}"><a href="javascript:;" >...</a></li>
        <li th:class="${session.customPage.pageNum==(session.customPage.totalPage-2)?'paginItem current':'paginItem'}" th:if="${(session.customPage.pageNum>session.customPage.totalPage-5) && (session.customPage.pageNum>5)}"><a href="javascript:;" th:onclick="lunbo([[${session.customPage.totalPage-2}]])" th:text="${session.customPage.totalPage-2}">4</a></li>
        <!--第六个格子-->
        <li class="paginItem" th:if="${session.customPage.pageNum<=5}"><a href="javascript:;" >...</a></li>
        <li th:class="${session.customPage.pageNum==(session.customPage.totalPage-1)?'paginItem current':'paginItem'}" th:if="${session.customPage.pageNum>5}"><a href="javascript:;" th:onclick="lunbo([[${session.customPage.totalPage-1}]])" th:text="${session.customPage.totalPage-1}">4</a></li>
        <!--第七个格子-->
        <li th:class="${session.customPage.pageNum==session.customPage.totalPage?'paginItem current':'paginItem'}"><a href="javascript:;" th:onclick="lunbo([[${session.customPage.totalPage}]])" th:text="${session.customPage.totalPage}">10</a></li>

        <!--        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>-->
        <li class="paginItem"><a href="javascript:;" th:onclick="lunbo([[${session.customPage.pageNum==session.customPage.totalPage?session.customPage.totalPage:session.customPage.pageNum+1}]])"><span class="pagenxt"></span></a></li>
      </ul>
      <!--总页数小于8页的时候-->
      <ul class="paginList" th:if="${session.customPage.totalPage<=7}">
        <li class="paginItem"><a href="javascript:;" th:onclick="lunbo([[${session.customPage.pageNum==1?1:session.customPage.pageNum-1}]])"><span class="pagepre"></span></a></li>

        <li th:each="i:${#numbers.sequence(1,session.customPage.totalPage)}" th:class="${i==session.customPage.pageNum?'paginItem current':'paginItem'}">
          <a href="javascript:;" th:text="${i}" th:onclick="lunbo([[${i}]])"></a>
        </li>

        <li class="paginItem"><a href="javascript:;" th:onclick="lunbo([[${session.customPage.pageNum==session.customPage.totalPage?session.customPage.totalPage:session.customPage.pageNum+1}]])"><span class="pagenxt"></span></a></li>
      </ul>
    </div>
  </form>
</div>
  <script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
    function chaxun(pageNum){
      $("#pageNum").val(pageNum);
      $("#customForm").submit();
    }

    $("#provinceId").change(function (){
      var provinceId = $("#provinceId").val();
      if(provinceId != null && provinceId != ""){
        $.ajax({
          url: "/custom/queryCityListByAjax",
          data: {"provinceId": provinceId},
          dataType: "JSON",
          success:function (data){
            /*清空城市数据*/
            $("#cityId").html("");
            var options = "<option value=''>请选择城市</option>";
            var arr=null;
            if(typeof data=='string')
              arr=JSON.parse(data);
            else
              arr=data;
            $.each(arr, function (i,obj){
              options += "<option value='"
                      + obj.id
                      + "'>"
                      + obj.cname
                      + "</option>";
            });
            $("#cityId").html(options);
          },
          error:function (){
            alert(222);
          }
        });
      }else {
        /*清空城市数据*/
        $("#cityId").html("");
        var options = "<option value=''>请选择城市</option>";
        $("#cityId").append(options);
      }
    });

    function lunbo(pageNum){
      $("#pageNum").val(pageNum);
      $("#customForm").submit();
    }

  </script>
<script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
